import React from "react";
// 引入类型声明文件
import type business from "@/types/business";
import type { ImageUploadItem } from 'antd-mobile/es/components/image-uploader';
// 自己封装的地区组件
import AreaPicker from '@/components/area/areapicker.tsx';
// 引入选择组件
import type { PickerValue } from 'antd-mobile/es/components/picker-view';

// 个人档案页面
const Profile = () => {
  // 获取全局挂载的用户信息
  const [business] = useState<business>(React.business);
  // 声明表单
  const [form] = React.UI.Form.useForm();
  // 设置头像
  const [avatar, SetAvatar] = useState<ImageUploadItem[]>([
    {
      url: business.avatar_cdn as string
    }
  ]);
  // 城市选择器
  const [AreaShow, SetAreaShow] = React.useState<boolean>(false);
  const [AreaActive] = useState<string[]>([business.province, business.city, business.district] as string[]);

  // 表单提交事件
  const OnSubmit = async (values: business) => {
    // 把当前用户id追加参数
    values.id = business.id;
    // 不修改密码，删掉密码这个属性
    if (!values.password) {
      delete values.password;
    }
    // 如果有上传/更新头像，增加头像这个属性 - 没有更新时是string类型，有则为File类型
    if (business.avatar && business.avatar instanceof File) {
      values.avatar = business.avatar;
    }
    // 删掉地区属性
    delete values.region_text;
    // 发起请求
    const result = await React.Http.upload('/business/profile', values);
    if (result.code === 1) {
      React.success(result.msg, () => {
        // 更新全局挂载的business数据
        React.business = result.data;
        // 更新Cookies的business数据
        React.Cookies.save('business', result.data, { path: '/' });
        // 有修改密码 则跳转到登录页
        if (values.password) {
          React.navigate('/business/login');
        } else {
          // 跳转回个人页面
          React.navigate('/business');
        }
      })
    } else {
      React.fail(result.msg);
    }
  }

  // 头像上传
  const OnUploadAvatar = async (file: File) => {
    // 赋值
    business.avatar = file;

    return {
      url: URL.createObjectURL(file)
    }
  }

  // 删除头像
  const OnAvatarDel = () => {
    business.avatar = '';
    SetAvatar([]);
  }

  // 确认选择省市区
  const OnAreaConfirm = (values: PickerValue[], name: PickerValue[]) => {
    // values:省市区对应的编码数组
    // name:省市区对应的名称数组
    const [province, city, district] = name; // 获取省市区的名称
    // 构建地区文本
    const RegionText = [];
    if (province) {
      RegionText.push(province);
    }
    if (city) {
      RegionText.push(city);
    }
    if (district) {
      RegionText.push(district);
    }

    // 更新表单的省市区
    form.setFieldsValue({
      region_text: RegionText.join('/'), // 将数组转换为字符串，中间用-连接
      // 获取地区编码
      code: values[2] ? values[2] : (values[1] ? values[1] : values[0])
    })
  }

  return (
    <>
      {/* 地区组件 */}
      <AreaPicker visible={AreaShow} active={AreaActive} onClose={() => SetAreaShow(false)} onConfirm={OnAreaConfirm} />

      {/* 表单结构 */}
      <React.UI.Form
        name="profile"
        layout='horizontal'
        mode='card'
        form={form}
        onFinish={OnSubmit}
        footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
      >
        {/* 头像 */}
        <React.UI.AutoCenter style={{ margin: '30px 0px' }}>
          <React.UI.ImageUploader value={avatar} maxCount={1} onChange={SetAvatar} upload={OnUploadAvatar} onDelete={OnAvatarDel} />
        </React.UI.AutoCenter>

        {/* 昵称 */}
        <React.UI.Form.Item name="nickname" initialValue={business.nickname ?? ''} label="昵称" rules={[{ required: true }]}>
          <React.UI.Input placeholder="请输入昵称" />
        </React.UI.Form.Item>

        {/* 手机号 */}
        <React.UI.Form.Item name="mobile" initialValue={business.mobile ?? ''} label="手机号">
          <React.UI.Input placeholder="请输入手机号" readOnly />
        </React.UI.Form.Item>

        {/* 密码 */}
        <React.UI.Form.Item name="password" initialValue={business.password ?? ''} label="密码">
          <React.UI.Input type="password" placeholder="不修改密码请留空" />
        </React.UI.Form.Item>

        {/* 邮箱 */}
        <React.UI.Form.Item name="email" label="邮箱" initialValue={business.email ?? ''} rules={[{ required: true }, { pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/, message: '邮箱格式不对' }]}>
          <React.UI.Input placeholder="请输入邮箱" />
        </React.UI.Form.Item>

        {/* 性别 */}
        <React.UI.Form.Item name="gender" initialValue={business.gender} label="性别" rules={[{ required: true }]}>
          {/* 单选框 */}
          <React.UI.Radio.Group>
            <React.UI.Space direction='horizontal'>
              <React.UI.Radio value='0'>保密</React.UI.Radio>
              <React.UI.Radio value='1'>男</React.UI.Radio>
              <React.UI.Radio value='2'>女</React.UI.Radio>
            </React.UI.Space>
          </React.UI.Radio.Group>
        </React.UI.Form.Item>

        {/* 城市选择器 */}
        <React.UI.Form.Item name="region_text" rules={[{ required: true }]} initialValue={business.region_text ?? ''} label="地区" onClick={() => SetAreaShow(true)}>
          <React.UI.Input placeholder="请选择地区" readOnly />
        </React.UI.Form.Item>
        {/* 城市码code 隐藏域 */}
        <React.UI.Form.Item
          name="code"
          label="地区码"
          hidden={true}
          initialValue={business.code ?? ''}
        >
          <React.UI.Input placeholder="地区码" readOnly />
        </React.UI.Form.Item>
      </React.UI.Form>
    </>
  )
}

export default Profile;